<template>
  <div>
    <headerMobel v-if="screenWidth <= 1024  || isMobile()" />
    <headerTop v-if="screenWidth > 1024  && !isMobile()" />
    <serveNav
      @changeNav="changeNav"
      :selectIndex="selectIndex"
      v-if="screenWidth > 1024  && !isMobile()"
    />
    <serveNavMobel
      @changeNav="changeNav"
      :selectIndex="selectIndex"
      v-if="screenWidth <= 1024  || isMobile()"
    />
    <!-- <headerSmall @headerChange="headerChange" v-if="screenWidth > 1024" /> -->
    <div class="case-list" :class="screenWidth > 1024 ? 'pc-height' : ''">
      <allCase ref="allCase" :allCaseTit="allCaseTit" v-if="selectIndex == 1" />
      <serveType @toAllcase="toAllcase" v-if="selectIndex == 2" />
      <userType @toAllcase="toAllcase" v-if="selectIndex == 3" />
    </div>
    <footer-page v-if="screenWidth > 1024  && !isMobile()"></footer-page>
    <footer-page-mobel v-if="screenWidth <= 1024  || isMobile()"></footer-page-mobel>
  </div>
</template>
    
    <script>
import { picConfigList } from "@/api/defapi";

import footerPageMobel from "@/components/footerPageMobel.vue";
import scrollHandle from "@/components/scrollHandle.vue";
import headerTop from "@/components/headerTop.vue";
import headerMobel from "@/components/headerMobel.vue";
import headerSmall from "@/components/headerSmall.vue";
import footerPage from "@/components/footerPage.vue";

import serveNav from "./serveNav.vue";
import serveNavMobel from "./serveNavMobel.vue";
import allCase from "./allCase.vue";
import serveType from "./serveType.vue";
import userType from "./userType.vue";
import { translate } from "element-plus";
export default {
  components: {
    headerTop,
    headerSmall,
    footerPage,
    scrollHandle,
    headerMobel,
    footerPageMobel,
    serveType,
    allCase,
    serveNav,
    serveNavMobel,
    userType,
  },
  data() {
    return {
      topHanderView: true,
      screenWidth: window.innerWidth,
      bannerImgList: "",
      baseApi: process.env.VUE_APP_IMGADDRESS,
      selectIndex: "1",
      allCaseTit: "所有案例",
    };
  },
  mounted() {
    window.addEventListener("resize", this.getScreenSise);
    picConfigList({ imgType: 1 }).then((res) => {
      this.bannerImgList = res.data;
    });
  },
  methods: {
    isMobile() {
      const userAgentInfo = navigator.userAgent;
      const mobileAgents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod",
      ];
      const mobileFlag = mobileAgents.some((mobileAgent) => {
        return userAgentInfo.indexOf(mobileAgent) > 0;
      });

      let isPro = /Version\/.* Safari/.test(userAgentInfo); // 检查是否有Safari标识，通常iPad Pro才会有

      // 更精确的检测方式，检查屏幕尺寸或像素比（PPI）
      let pixelRatio = window.devicePixelRatio;
      let isHighResolution =  pixelRatio >= 2; // iPad Pro的大约分辨率为1024x1366，像素比为2或3

      let isipadpro = isPro && isHighResolution;
      console.log(isipadpro, isPro, isHighResolution);

      let isiPad = (navigator.userAgent.match(/(iPad)/) || (navigator.userAgent.match(/(Macintosh)/) && navigator.maxTouchPoints >= 1));
      return mobileFlag || isiPad;
    },
    changeNav(val) {
      this.selectIndex = val;
      if (val == 1) {
        this.allCaseTit = "所有案例";
        this.$nextTick(() => {
          this.$refs.allCase.initData();
        });
      }
    },
    getScreenSise() {
      this.screenWidth = window.innerWidth;
    },
    headerChange(val) {
      this.topHanderView = !val;
    },
    toAllcase(val) {
      this.allCaseTit = val;
      this.selectIndex = 1;
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.pc-height {
  min-height: 100vh;
}
.case-list {
  padding-bottom: 200px;
  background-color: #ffffff;
}
</style>